<template>
	<!-- 用户名，用户头像 -->
	<view class="nav">
		<view class="v" v-for="(v,k) of list" :key="k">
			<text class="num">{{v.num}}</text>
			<text class="label">{{v.label}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	type Props = {
		list ? : { num: number, label: string } [],
	}
	withDefaults(defineProps < Props > (), {
		list: () => [{
			num: 0,
			label: "收藏"
		}, {
			num: 0,
			label: "点赞"
		}, {
			num: 0,
			label: "投诉"
		}]
	});
</script>

<style lang="scss" scoped>
	.nav {
		display: flex;
		height: 120rpx;
		padding: 0rpx 40rpx;
		margin-top: 60rpx;
	}

	.v {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.num {
		font-size: 38rpx;
		font-weight: bold;
	}

	.label {
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>
